<template>
  <div class="supplier-details">
    <FixedOperation>
      <el-row>
        <el-col :span="10" :offset="14" class="flex justify-end">
          <slot></slot>
          <el-button
            type="primary"
            plain
            @click="handleAgree"
            v-if="handBtn && infoId.includes(userStore.user.userId)"
          >
            同意</el-button
          >
          <el-button
            type="primary"
            plain
            @click="handleDisagree"
            v-if="handBtn && infoId.includes(userStore.user.userId)"
          >
            不同意</el-button
          >
          <el-button type="primary" plain @click="viewProcess" v-if="proInsId">
            查看流程</el-button
          >
          <el-button type="primary" plain @click="handleBack"> 返回</el-button>
        </el-col>
      </el-row>
    </FixedOperation>
    <div
      class="tatle-box app-container"
      id="printTest"
      v-loading="loading"
      v-if="formData"
    >
      <div class="text-center">供应商准入评审表</div>
      <div class="flex justify-between p-y-1">
        <div class="w-8/24">供应商编号:{{ formData.supplierNumber }}</div>
        <div class="w-8/24 text-center">
          <dict-drop :options="supplier_type" :value="formData.type" />
        </div>
        <div class="w-8/24 text-right">
          填表日期:{{ parseTime(formData.createTime, '{y}年{m}月{d}日') }}
        </div>
      </div>
      <table v-if="formData.type != '3'">
        <tbody>
          <!-- 供应商基本信息 -->
          <tr>
            <td rowspan="8" class="w-42px text-center" style="padding: 1rem">
              供应商基本信息
            </td>
            <td class="w-7/24 text-center">供应商名称</td>
            <td colspan="3" class="text-center">
              <div v-if="formData.alterSupplierName">
                <span class="text-green-500">{{ formData.supplierName }}</span>
                变为
                <span class="text-green-500">{{
                  formData.alterSupplierName
                }}</span>
              </div>
              <div v-else>{{ formData.supplierName }}</div>
            </td>
          </tr>
          <tr>
            <td class="text-center">类型</td>
            <td colspan="3" class="text-center">{{ formData.supplierType }}</td>
          </tr>
          <tr>
            <td class="text-center">地址</td>
            <td colspan="3" class="text-center">{{ formData.address }}</td>
          </tr>
          <tr>
            <td class="text-center">法定代表人</td>
            <td class="text-center">{{ formData.legalRepresentative }}</td>
            <td class="text-center">注册资本</td>
            <td class="text-center">{{ formData.registeredCapital }}</td>
          </tr>
          <tr>
            <td class="text-center">统一社会信用代码</td>
            <td class="text-center">{{ formData.supplierTaxcode }}</td>
            <td class="text-center">营业期限</td>
            <td class="text-center">{{ formData.businessTerm }}</td>
          </tr>
          <tr>
            <td class="text-center">开户银行</td>
            <td class="text-center">
              <div v-if="formData.alterDepositBank">
                <span class="text-green-500">{{ formData.depositBank }}</span>
                变为<span class="text-green-500">{{
                  formData.alterDepositBank
                }}</span>
              </div>
              <div v-else>{{ formData.depositBank }}</div>
            </td>
            <td class="text-center">银行账号</td>
            <td class="text-center">
              <div v-if="formData.alterBankAccount">
                <span class="text-green-500"> {{ formData.bankAccount }}</span>
                变为<span class="text-green-500">{{
                  formData.alterBankAccount
                }}</span>
              </div>
              <div v-else>{{ formData.bankAccount }}</div>
            </td>
          </tr>
          <tr>
            <td class="text-center">系统征信分值</td>
            <td class="text-center">{{ formData.creditScore }}</td>
            <td class="text-center">信用级别</td>
            <td class="text-center">{{ formData.creditRating }}</td>
          </tr>
          <tr>
            <td class="text-center">业务联系人</td>
            <td class="text-center">{{ formData.contactName }}</td>
            <td class="text-center">联系电话</td>
            <td class="text-center">{{ formData.contactPhone }}</td>
          </tr>
          <!-- 产品信息 -->
          <tr>
            <td rowspan="3" class="text-center" style="padding: 1rem">
              产品信息
            </td>
            <td class="text-center">产品名称</td>
            <td colspan="3" class="text-center">
              {{ formData.supplierProduct }}
            </td>
          </tr>
          <tr>
            <td class="text-center">产品规格型号</td>
            <td colspan="3" class="text-center">
              {{ formData.supplierSpecification }}
            </td>
          </tr>
          <tr>
            <td class="text-center">初次询价价格</td>
            <td class="text-center">{{ formData.supplierInquiryPrice }}</td>
            <td class="text-center">上传询价资料</td>
            <td class="text-center">
              <div
                v-for="item in formData.inquiryFileList"
                :key="item.fileName"
              >
                <el-link
                  @click="viewFiles(item.url)"
                  :underline="false"
                  type="primary"
                  >{{ item.origFileName }}</el-link
                >
              </div>
            </td>
          </tr>
          <!-- 评价项目 -->
          <tr>
            <td rowspan="11" class="text-center" style="padding: 1rem">
              评价项目
            </td>
            <td class="text-center">质量体系认证</td>
            <td class="text-center">
              <dict-drop
                :options="sys_have_no"
                :value="formData.qualitySystem"
              />
            </td>
            <td class="text-center">相关证书/资质</td>
            <td class="text-center">
              <dict-drop
                :options="sys_have_no"
                :value="formData.relevantCertificate"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">品质异常记录</td>
            <td class="text-center">
              <dict-drop
                :options="sys_have_no"
                :value="formData.abnormalQuality"
              />
            </td>
            <td class="text-center">交货异常记录</td>
            <td class="text-center">
              <dict-drop
                :options="sys_have_no"
                :value="formData.abnormalDelivery"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">服务与合作</td>
            <td class="text-center">
              <dict-drop
                :options="service_and_cooperation"
                :value="formData.serviceCooperation"
              />
            </td>
            <td class="text-center">近三年内有无 重大违法记录</td>
            <td class="text-center">
              <dict-drop
                :options="sys_have_no"
                :value="formData.majorViolations"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">供货来源</td>
            <td class="text-center">
              <dict-drop
                :options="suppiler_supply_source"
                :value="formData.supplySource"
              />
            </td>
            <td class="text-center">办公场所</td>
            <td class="text-center">
              <dict-drop
                :options="supplier_office_sapce"
                :value="formData.officeSpace"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">价格水平</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_price_level"
                :value="formData.priceLevel"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">供应商人力资源情况 （团队、员工素质）</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_evaluate_situation"
                :value="formData.manpowerSituation"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">商务流程</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_business_process"
                :value="formData.businessProcess"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">供应商知名度/美誉度</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_evaluate_situation"
                :value="formData.supplierVisibility"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">产品售前售后</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_evaluate_situation"
                :value="formData.preAndAfter"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">供应商财务状况</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_evaluate_situation"
                :value="formData.financialCondition"
              />
            </td>
          </tr>
          <tr>
            <td class="text-center">与公司往来付款条件</td>
            <td colspan="3" class="text-center">
              <dict-drop
                :options="supplier_payment_terms"
                :value="formData.paymentTerms"
              />
            </td>
          </tr>
          <!-- 市场考察 -->
          <tr>
            <td rowspan="2" class="text-center" style="padding: 1rem">
              市场考察
            </td>
            <td class="text-center">合作项目描述</td>
            <td colspan="3" class="text-center">
              {{ formData.projectDescription }}
            </td>
          </tr>
          <tr>
            <td class="text-center">准入市场分析</td>
            <td colspan="3" class="text-center">
              {{ formData.marketAnalysis }}
            </td>
          </tr>
          <!-- 合作商机 -->
          <tr>
            <td rowspan="3" class="text-center" style="padding: 1rem">
              合作商机
            </td>
            <td colspan="4">
              <p>
                1、是否为我方税控用户：
                <dict-drop
                  :options="yes_or_no"
                  :value="formData.taxControl"
                  class="inline"
                /><span v-if="formData.taxControl == '0'"
                  >其税控信息：{{ formData.nonTaxControlReason }}</span
                >
              </p>
              <p>
                2、采购我方产品：
                <dict-drop
                  :options="sys_have_no"
                  :value="formData.purchaseProduct"
                  class="inline"
                /><span v-if="formData.purchaseProduct == '1'"
                  >，产品：{{ formData.productName }}金额：{{
                    formData.productPrice
                  }}</span
                >
              </p>
              <p>
                3、若无任何交易，与其沟通后续合作，向其推荐公司<span>{{
                  formData.recommendedProduct
                }}</span>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <table v-if="formData.type == '3'">
        <tbody>
          <tr>
            <td class="w-5/24">供应商名称</td>
            <td class="w-7/24">
              <div v-if="formData.alterSupplierName">
                <span class="text-green-500">{{ formData.supplierName }}</span>
                变为<span class="text-green-500">{{
                  formData.alterSupplierName
                }}</span>
              </div>
              <div v-else>{{ formData.supplierName }}</div>
            </td>
            <td class="w-5/24">企业税号</td>
            <td class="w-7/24">{{ formData.supplierTaxcode }}</td>
          </tr>
          <tr>
            <td>地址</td>
            <td>{{ formData.address }}</td>
            <td>联系人</td>
            <td>{{ formData.contactName }}</td>
          </tr>
          <tr>
            <td>电话</td>
            <td>{{ formData.contactPhone }}</td>
            <td>联行号</td>
            <td>{{ formData.interbankNumber }}</td>
          </tr>
          <tr>
            <td>开户银行</td>
            <td>
              <div v-if="formData.alterDepositBank">
                <span class="text-green-500"> {{ formData.depositBank }}</span>
                变为
                <span class="text-green-500">{{
                  formData.alterDepositBank
                }}</span>
              </div>
              <div v-else>{{ formData.depositBank }}</div>
            </td>
            <td>银行账号</td>
            <td>
              <div v-if="formData.alterBankAccount">
                <span class="text-green-500">{{ formData.bankAccount }}</span>
                变为
                <span class="text-green-500">{{
                  formData.alterBankAccount
                }}</span>
              </div>
              <div v-else>{{ formData.bankAccount }}</div>
            </td>
          </tr>
          <tr>
            <td>支付说明</td>
            <td colspan="3" class-name="break-all">{{ formData.remark }}</td>
          </tr>
          <!-- 合作商机 -->
          <tr>
            <td rowspan="3">合作商机</td>
            <td colspan="3">
              <p>
                1、是否为我方税控用户：
                <dict-drop
                  :options="yes_or_no"
                  :value="formData.taxControl"
                  class="inline"
                /><span v-if="formData.taxControl == '0'"
                  >其税控信息：{{ formData.nonTaxControlReason }}</span
                >
              </p>
              <p>
                2、采购我方产品：
                <dict-drop
                  :options="sys_have_no"
                  :value="formData.purchaseProduct"
                  class="inline"
                /><span v-if="formData.purchaseProduct == '1'"
                  >，产品：{{ formData.productName }}金额：{{
                    formData.productPrice
                  }}</span
                >
              </p>
              <p>
                3、若无任何交易，与其沟通后续合作，向其推荐公司<span>{{
                  formData.recommendedProduct
                }}</span>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
      <div>
        附件：
        <div v-for="item in formData.applicationFileList" :key="item.fileName">
          <el-link
            @click="viewFiles(item.url)"
            :underline="false"
            type="primary"
            >{{ item.origFileName }}</el-link
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="SupplierDetails">
import { reactive, toRefs, ref, createApp, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getSupplier, setAlterSupplier } from '@/api/supplierManage/index'
import { viewFile } from '@/utils/commo'
import useUserStore from '@/store/modules/user'
import useTagsViewStore from '@/store/modules/tagsView'
import useCommonStore from '@/store/modules/common'
const commonStore = useCommonStore()
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()

const {
  yes_or_no,
  supplier_evaluate_situation,
  supplier_price_level,
  supplier_office_sapce,
  supplier_business_process,
  suppiler_supply_source,
  sys_have_no,
  supplier_payment_terms,
  supplier_type
} = proxy.useDict(
  'yes_or_no', //是否
  'supplier_evaluate_situation', //供应商评价情况
  'supplier_price_level', //供应商价格水平
  'supplier_office_sapce', //供应商办公场所
  'supplier_business_process', //供应商商务流程
  'suppiler_supply_source', //供应商供货来源
  'sys_have_no', //有无
  'supplier_payment_terms', //供应商付款条件
  'supplier_type' //--供应商来源
)
const service_and_cooperation = computed(() => {
  return supplier_evaluate_situation.value.filter(item => item.value != '2')
})

const formData = ref({})

const data = reactive({
  loading: false
})
let { loading } = toRefs(data)

const proInsId = ref('')
watch(
  [() => route.query.supplierId, () => route.query.proInsId],
  () => {
    if (route.query.supplierId) {
      console.log('这是详情！')
      getFormData(route.query.supplierId)
      // statusForm.value.name = formData.value.name
    }
    if (route.query.proInsId) {
      proInsId.value = route.query.proInsId
    }
  },
  {
    immediate: true
  }
)
// watchEffect(() => {
//   if (route.query.supplierId) {
//     console.log('这是详情！')
//     getFormData(route.query.supplierId)
//     // statusForm.value.name = formData.value.name
//   }
//   if (route.query.proInsId) {
//     proInsId.value = route.query.proInsId
//   }
// })

/** 获取产品详情
 * @param {number}  id 表单id
 */
const handBtn = ref(false)
function getFormData(id) {
  loading.value = true
  getSupplier(id).then(res => {
    formData.value = res.data
    loading.value = false
    let { alterBankAccount, alterDepositBank, alterSupplierName } = res.data
    if (alterBankAccount || alterDepositBank || alterSupplierName) {
      handBtn.value = true
    } else {
      handBtn.value = false
    }
  })
}

// 预览文件
function viewFiles(url) {
  viewFile(url, userStore.userInfo.nickName)
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 查看流程
function viewProcess() {
  router.push({
    path: '/process/workDetail',
    query: {
      procInsId: proInsId.value,
      //   taskId: row.taskId,
      processed: false,
      isCirculation: route.query?.isCirculation || undefined
    }
  })
}
// 返回handleBack
const handleBack = () => {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
}
const infoId = ref('')
// 初始化
async function init() {
  infoId.value = await commonStore.getUploadTemplateDown(
    'supplier_info_approver'
  )
  //   getFormData(route.query.productId)
  //   statusForm.value.name = formData.value.name
}

// 同意
const handleAgree = () => {
  formData.value.alterFlag = '1'
  setAlterSupplier({ ...formData.value }).then(res => {
    proxy.$modal.msgSuccess('已同意')
    getFormData(formData.value.id)
  })
}
// 不同意
const handleDisagree = () => {
  formData.value.alterFlag = '2'
  setAlterSupplier({ ...formData.value }).then(res => {
    proxy.$modal.msgSuccess('已拒绝')
    getFormData(formData.value.id)
  })
}

init()
</script>
<style lang="scss" scoped>
.tatle-box {
  padding: 20px;
  table {
    @apply border-collapse w-full;
    td {
      @apply border border-solid border-gray-300 p-2;
      box-sizing: border-box;
    }
  }
}
</style>
